<template>
	<view v-if="data">
		<!-- 待付款 -->
		<block v-if="data._status._type==0">
		<view class="box dfk-box">
			<view class="money">
				 <view class="em">￥</view>{{data.pay_price}}
			</view>
			<view class="msg">
				应付金额
			</view>
			<view class="time">
				{{data._status._msg}}
			</view>
		</view>
		<view class="box address-box" v-if="data.real_name!=''">
			<view class="top">
				<view class="left">
					<view class="name">
						{{data.real_name}}
					</view>
					<view class="tel">
						{{data.user_phone}}
					</view>
				</view>
				<view class="right">
					<up-icon color="#B5B5B5" size="28rpx" name="arrow-right"></up-icon>
				</view>
			</view>
			<view class="address">
				{{data.user_address}}
			</view>
		</view>
		</block>
		<block v-else>
			<view class="box status-box">
				<view class="h1">
					<view class="left">
						<image :src="`${$imgurl}/static/icon-che.png`" mode=""></image>{{data._status._title}}
					</view>
					<view class="right">
						<up-icon color="#B5B5B5" size="28rpx" name="arrow-right"></up-icon>
					</view>
				</view>
				<view class="msg">
					{{data._status._msg}}
				</view>
				<view class="address-info" v-if="data.real_name!=''">
					<image :src="`${$imgurl}/static/icon-address.png`" mode=""></image>
					<view class="name">
						{{data.real_name}}
					</view>
					<view class="tel">
						{{data.user_phone}}
					</view>
				</view>
				<view class="address" v-if="data.real_name!=''">
					{{data.user_address}}
				</view>
			</view>
		</block>
		
		<view class="box info-box">
			<my-good-item :list="data.cartInfo" />
			<view class="it-box">
				<view class="it">
					<view class="msg">商品金额</view>
					<view class="money">
						<view class="em">￥</view>{{data.total_price}}
					</view>
				</view>
				<!-- 待付款 -->
				<view class="it" v-if="data.use_integral > 0">
					<view class="msg">优惠券</view>
					<view class="yhq">
						<view class="em">抵扣金</view>-￥{{data.deduction_price}}
					</view>
				</view>
				<block v-if="data._status._type==0">
				
				<view class="it" v-if="data._status._payType">
					<view class="msg">支付方式</view>
					<view class="pay">
						<image :src="`${$imgurl}/static/wx-pay.png`" mode="widthFix"></image>{{data._status._payType}}
					</view>
				</view>
				<view class="it">
					<view class="msg">应付金额</view>
					<view class="money red">
						<view class="em">￥</view>{{data.pay_price}}
					</view>
				</view>
				</block>
				<!-- 待发货,待评价 -->
				<block v-else>
				<view class="it">
					<view class="msg">订单号</view>
					<view class="val">
						{{data.order_id}}
					</view>
				</view>
				<view class="it">
					<view class="msg">创建时间</view>
					<view class="val">
						{{data._add_time}}
					</view>
				</view>
				<view class="it" v-if="data._pay_time">
					<view class="msg">支付时间</view>
					<view class="val">
						{{data._pay_time}}
					</view>
				</view>
				<view class="it" v-if="data._status._payType">
					<view class="msg">支付方式</view>
					<view class="val">
						{{data._status._payType}}
					</view>
				</view>
				</block>
			</view>
		</view>
		<view class="bottom-box">
			<view class="btn-box">
				<button open-type="contact" class="left">
					<image :src="`${$imgurl}/static/icon-kf.png`" mode=""></image>客服</button>
				<view class="btns">
					<!-- 待付款 -->
					<block v-if="data._status._type==0">
						<view class="it" @click="onOrderCancel">
							取消订单
						</view>
						<navigator :url="`../pay?orderId=`+id" class="it send">
							立即支付
						</navigator>
					</block>
					<!-- 待发货 -->
					<block v-else-if="data._status._type==1">
						<!-- <view class="it">
							催促发货
						</view> -->
						<navigator hover-class="on" :url="`./refund?id=`+data.id" class="it">
							申请退款
						</navigator>
						<view class="it send" v-if="data.order_type=='other'" @click="onSend">
							送别人
						</view>
					</block>
					<block v-if="data._status._type==2">
						<view class="it ok" @click="onOrderTake(data.order_id)">
							确认收货
						</view> 
					</block>
					<!-- 待评价 -->
					<block v-else-if="data._status._type==3">
						<!-- <view class="it">
							立即评价
						</view> -->
						<view class="it" @click="onOrderAgain">
							再买一单
						</view>
						<navigator :url="`/pages/bonus/send?id=`+data.order_id"  class="it send" v-if="data._status._type==3">
							发起谜金
						</navigator>
					</block>
					<!-- 取消申请退款 -->
					<block v-if="data.refund_status==1">
						<view class="it" @click="onOrderRefundCancel">
							取消申请
						</view>
					</block>
				</view>
			</view>
		</view>
		<my-send-select ref="sendRef" :id='data.order_id'></my-send-select>
	</view>
</template>

<script setup>
	import {ref} from "vue"
	import {onLoad} from "@dcloudio/uni-app"
	import {getOrderDetail,orderCancel,orderAgain,orderTake,getRefundOrderDetail,orderRefundCancel} from "/api/products.js"
	const sendRef=ref(null)
	const id=ref('')
	const data=ref('')
	const isRefund=ref(false) //是否为售后订单
	onLoad((obj)=>{
		id.value=obj.id
		isRefund.value=obj.refund?true:false
		getData();
	})
	const getData= async ()=>{
		let res=''
		if(isRefund.value){
			res= await getRefundOrderDetail(id.value)
		}else{
			res= await getOrderDetail(id.value)
		}

		data.value=res.data
	}
	const onOrderCancel= ()=>{
		uni.showModal({
			content:'确认取消该订单',
			confirmText:'确认',
			success: async (res) => {
				if(res.confirm){
					const re= await orderCancel({id:id.value})
					uni.$u.toast(re.msg)
					if(re.code=='100019'){
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}
					
				}
			}
		})
	}
	const onOrderRefundCancel= ()=>{
		uni.showModal({
			content:'您确定放弃此次申请吗',
			confirmText:'确认',
			success: async (res) => {
				if(res.confirm){
					const re= await orderRefundCancel(id.value)
					uni.$u.toast(re.msg)
					if(re.code=='100019'){
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}
					
				}
			}
		})
	}
	const onOrderAgain= async ()=>{
		const re= await orderAgain({uni:id.value})
		uni.redirectTo({
			url:'../confirmOrder?new=1&cartId='+re.data.cateId
		})
	}
	const onOrderTake= (id)=>{
		uni.showModal({
			content:'该订单确认收货',
			confirmText:'确认',
			success: async (res) => {
				if(res.confirm){
					const re= await orderTake({uni:id})
					uni.$u.toast(re.msg)
					if(re.code=='410204'){
						getData();
					}
					
				}
			}
		})
	}
	const onSend=()=>{
		sendRef.value.show();
	}
</script>
<style>
	page{
		background-color: #F5F6FA;
		padding-bottom:	calc(92rpx + 14rpx + 14rpx + 30rpx);
		padding-bottom: calc(92rpx + 14rpx + 14rpx + 30rpx + env(safe-area-inset-bottom) );
	}
</style>
<style lang="scss"  scoped>
	page{
		background-color: #F5F6FA;
		padding-bottom:	calc(92rpx + 14rpx + 14rpx + 30rpx);
		padding-bottom: calc(92rpx + 14rpx + 14rpx + 30rpx + env(safe-area-inset-bottom) );
	}
	// 待付款
	.dfk-box{
		text-align: center;
		line-height: 1;
		background: linear-gradient( 180deg, #FFF1F0 0%, #FFFFFF 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #FFFFFF;
		margin-top:24rpx;
		padding: 60rpx 0;
		.money{
			display: flex;
			justify-content: center;
			font-weight: bold;
			color:#F5493D;
			font-size: 72rpx;
			align-items: flex-end;
			margin-top:28rpx;
			.em{
				font-size:48rpx;margin-left:6rpx;
			}
		}
		.msg{
			font-size: 24rpx;
			font-weight: bold;
			margin-top:24rpx;
		}
		.time{
			margin-top:40rpx;
			font-size:24rpx;
			display: flex;justify-content:center;
			align-items: center;
			color:#9A9A9A;
			::v-deep{
				.u-count-down__text{
					color:#F5493D;line-height: 1;font-size:24rpx;font-weight: bold;
				}
			}
		}
	}
	.status-box{
		margin-top:24rpx;
		padding: 40rpx 24rpx;
		background-color: #fff;
		line-height: 1;
		.h1{
			display: flex;justify-content: space-between;align-items: center;
			.left{
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size:28rpx;color:#F5493D;
				image{
					width:28rpx;height:28rpx;margin-right:8rpx;
				}
			}
			
		}
		.msg{
			font-size: 24rpx;
			margin-top:20rpx;line-height: 1;color:#141311;
		}
		.address-info{
			margin-top:32rpx;
			display: flex;align-items: center;font-size: 28rpx;font-weight: bold;
			image{
				width:28rpx;height:28rpx;margin-right: 8rpx;
			}
			.tel{
				margin-left:16rpx;
			}
		}
		.address{
			margin-top:20rpx;font-size: 26rpx;
			color:#838A99;
		}
	}
	.address-box{
		padding:44rpx 28rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top:20rpx;
		line-height: 1;
		.top{
			display: flex;justify-content: space-between;align-items: center;
			.left{
				display: flex;
				gap: 16rpx;
				font-weight: 32rpx;
				font-weight: bold;
			}
		}
		.address{
			margin-top:28rpx;font-size: 26rpx;
			color:#838A99;
		}
	}
	
	.info-box{
		padding:0 28rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-top:20rpx;
		
		.it-box{
			padding:22rpx 0;
			border-top: 1rpx solid #EDEDED;
			.it{
				display: flex;line-height: 1;
				justify-content: space-between;
				padding:22rpx 0;
				&:nth-child(1){
					.msg{
						font-size: 28rpx;
					}
				}
				.msg{
					font-size: 26rpx;
				}
				.val{
					font-size: 26rpx;
					color:#9A9A9A;
				}
				.money{
					display: flex;
					font-weight: bold;
					
					color:#141311;
					font-size: 32rpx;
					align-items: flex-end;
					&.red{
						color:#F5493D;
					}
					.em{
						font-size:24rpx;
					}
				}
				.pay{
					display: flex;align-items: center;font-size: 26rpx;
					image{
						width:40rpx;margin-right:14rpx;
					}
				}
				.yhq{
					display: flex;align-items: center;
					font-size: 26rpx;
					color:#F5493D;
					.em{
						background-color: #FEF4EF;
						margin-right:12rpx;
						border-radius: 4rpx;
						padding:0 6rpx;
						font-size: 20rpx;
						line-height: 32rpx;
						color:#FF7C4D;
					}
				}
			}
		}
	}
	
	.bottom-box{
		position: fixed;
		bottom:0;width:100%;
		left:0;
		background-color: #fff;
		padding:14rpx 24rpx;
		box-sizing: border-box;
		padding-bottom: calc(14rpx + env(safe-area-inset-bottom) );
	}
	.btn-box{
		display: flex;
		justify-content: space-between;align-items: center;
		.left{
			color:#9A9A9A;font-size: 22rpx;line-height: 1;
			padding:0 24rpx;
			background-color: #fff;
			image{
				width:40rpx;height:40rpx;display: block;
				margin: 0 auto;
				margin-bottom: 12rpx;
			}
		}
		.btns{
			display: flex;align-items: center;
			gap: 12rpx;
			.it{
				color:#838A99;
				border-radius: 8rpx;
				background-color: #F5F6FA;
				padding:0 24rpx;line-height: 68rpx;
				font-size: 28rpx;
				min-width: 160rpx;
				box-sizing: border-box;
				text-align: center;
				&.send{
					background:linear-gradient(90deg, #FF9940,#FD2A00);
					color:#fff;
				}
				&.ok{
					background-color: #FFEEED;
					color:#FF4A40;
				}
			}
			
		}
		
	}
</style>
